<template>
  <view class="page">
    <u-navbar
      :is-back="false"
      title="车辆列表"
      :background="{ background: '#1f7efe' }"
      title-color="#fff"
      title-size="38"
      :border-bottom="false"
    >
    </u-navbar>

    <view class="car-back">
      <image class="car-back-img" src="../../static/img/car-back.svg"></image>
    </view>

    <view class="car-list">
      <view class="car-list-title"> 车辆列表 </view>
      <scroll-view scroll-y="true" class="car-list-scroll">
        <view class="car-list-scroll-view">
          <view class="car-list-item" v-for="item in carList">
            <image
              class="car-list-item-img"
              src="../../static/img/car-icon.svg"
            ></image>
            <text class="car-list-item-text">{{ item.plate_num }}</text>
            <view class="car-list-item-btn">
              <view class="car-list-item-btn-text" @click="carUpdate(item)">
                编辑
              </view>
            </view>
          </view>
          <view class="car-list-add btn" @click="toPage('carAdd')">
            <image
              class="car-list-add-img"
              src="../../static/img/plus.svg"
            ></image>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { getCarList } from "@/api/car.js";
export default {
  data() {
    return {
      carList: [],
    };
  },
  onShow() {
    getCarList().then((res) => {
      this.carList = res.data.data.data;
    });
  },
  methods: {
    toPage(url) {
      uni.navigateTo({
        url: "/pages/" + url + "/" + url,
      });
    },
    carUpdate(carItem) {
      uni.navigateTo({
        url: "/pages/carUpdate/carUpdate?car_item=" + JSON.stringify(carItem),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.car-back {
  background-color: #1f7efe;
  height: 250rpx;
  position: absolute;
  z-index: -1;
  width: 100%;

  &-img {
    width: 343rpx;
    height: 161rpx;
    position: absolute;
    bottom: 72rpx;
    right: 50rpx;
  }
}

.car-list {
  margin-top: 178rpx;
  background-color: #fff;
  border-radius: 72rpx 72rpx 0 0;
  height: calc(100vh - 178rpx - 94px - var(--status-bar-height));
  box-sizing: border-box;

  &-title {
    font-size: 32rpx;
    font-weight: bold;
    line-height: 144rpx;
    color: #333333;
    margin: 0 30rpx;
  }

  &-scroll {
    height: calc(
      100vh - 178rpx - 144rpx - 94px + 70rpx - var(--status-bar-height)
    );

    &-view {
      padding-bottom: 50rpx;
    }
  }

  &-add {
    width: 130rpx;
    height: 130rpx;
    background-color: #1a88ff;
    border-radius: 50%;
    border: 4rpx solid #ffffff;
    filter: drop-shadow(0rpx 8rpx 24rpx rgba(26, 136, 255, 0.302));
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 80rpx auto 100rpx;

    &-img {
      width: 50rpx;
      height: 50rpx;
    }
  }

  &-item {
    margin: 0 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40rpx;
    height: 182rpx;
    background: #ffffff;
    box-shadow: 0px 4rpx 12rpx rgba(153, 153, 153, 0.2);
    border-radius: 20rpx;
    position: relative;
    overflow: hidden;
    margin-bottom: 32rpx;

    &-img {
      width: 72rpx;
      height: 72rpx;
    }

    &-text {
      flex: 1;
      font-weight: bold;
      line-height: 50px;
      color: #1a1a1a;
      font-size: 36rpx;
      margin-left: 32rpx;
    }

    &-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: -40rpx;
      top: 0;
      height: 100%;
      width: 220rpx;
      background-color: #1a88ff;
      transform: skew(-20deg);
      z-index: 0;

      &-text {
        transform: skew(20deg);
        color: #ffffff;
        margin-right: 20rpx;
      }
    }
  }
}
</style>
